<script setup name="develop-trend">

import { onMounted ,onUnmounted, ref } from "vue";

const historyItems = [
  {
    time:"2018年",
    title:'开运科技在深圳南山成立',
    des:'初创团队通过对该行业专业的了解和分析，成立开运科技智慧物流平台，并由专业技术团队开始搭建。',
  },
  {
    time:"2019年",
    title:'开运科技智慧物流平台客户突破10w',
    des:'通过不断对平台技术的更新和迭代，不断解决市场和客户遇到的痛点难点，平台在业内深受好评。',
  },
  {
    time:"2020年",
    title:'服务客户破百万，成为专业的物流撮合智慧平台',
    des:'开运科技继续在行业深耕发展，并不断壮大。',
  },
  {
    time:"2022年",
    title:' 开运数科（武汉）科技有限公司成立于',
    des:'随着业务不断扩展，公司在华中重要城市武汉成立武汉开运数科有限公司，服务更多的客户',
  },
]

// 使用ref赋值 响应式
let topItems = ref([
  {
    title:"平台认证司机",
    icon:'sj-index',
    valueColor:'#509EFF',
    value:500,
  },
  {
    title:"平台认证车辆",
    icon:'cl-index',
    valueColor:'#509EFF',
    value:3000
  },
  {
    title:"平台货源数量",
    icon:'hy-index',
    valueColor:'#509EFF',
    value:5560,
  }
]);

let numTimer = ref(null);

/**
 * 组件被挂载
 */
onMounted(() => {
  console.log('组件被挂载');
  numTimer = setInterval(() => {
    topItems.value.forEach(item => {
      item.value += 500;
      console.log('执行数量加')
    })
  }, 5000)

});

/**
 * 组件被移除
 */
onUnmounted(() => {
  console.log('组件被移除');
  clearInterval(numTimer);
});

</script>

<template>
  <page-view>
    <div class="container">
      <div class="content">
        <div class="content-top">
          <div class="title">平台认证司机车辆货源</div>
          <el-row class="content-top-row" :gutter="100">
            <el-col
                v-for="(item, index) in topItems"
                :span="8"
                :key="index"
            >
              <el-card class="top-item">
                <div class="top-item-header">
                  <div>
                    <svg-icon
                        :style="'width:60px;height:60px;color:' + item.valueColor + ';'"
                        :icon-class="item.icon"
                    />
                  </div>
                  <div class="top-item-title">{{item.title}}</div>
                  <div style="display: flex;align-items: center">
                    <span class="top-item-value">
                      <vue-number-roll-plus
                          :number="item.value"
                          :speed="1.5"
                          background="transparent"
                       >
                      </vue-number-roll-plus>
                    </span>
                  </div>

                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div class="title">平台大事记</div>
        <el-timeline>
          <el-timeline-item
              v-for="(item, index) in historyItems"
              :timestamp="item.time"
              placement="top"
              color="#07beff"
              :key="index"
          >
            <el-card>
              <h4>{{item.title}}</h4>
              <p>{{item.des}}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </page-view>
</template>

<script>
import VueNumberRollPlus from "vue3-number-roll-plus"
import "vue3-number-roll-plus/main.css"
export default {
  name: "develop-trend",
  components: {VueNumberRollPlus}
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

.container {
  background-color: #f8f8f8;
  color: #333;
  padding: 50px;
  margin: 0;
}

.content {
  margin-left: auto;
  margin-right: auto;

  .title {
    height: 80px;
    line-height: 80px;
    text-align: left;
    color: rgb(51, 51, 51);
    font-size: 28px;
  }

  .content-top {
    margin-bottom: 30px;
  }

  .content-top-row {
    display: flex;
    justify-content: center;

    .top-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      align-content: center;

      .top-item-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
      }

      .top-item-title {

      }

      .top-item-value {
        margin-top: 10px;
        font-size: 32px;
        font-weight: bold;
        color: #509eff;
      }
    }
  }
}


</style>
